<template>
  <div>
    <!-- v-color="'red'" 里面的单引号不能省略 -->
    <!-- <h3 v-color="'red'">自定义指令组件</h3> -->
    <h3 v-color="myColor">自定义指令组件</h3>
    <button @click="changeColor">更改h3的背景颜色</button>
  </div>
</template>
<script>
// 定义私有指令，并体会自定义指令的钩子和参数
export default {
  data() {
    return {
      myColor: 'red'
    };
  },
  /* 参考博文：https://blog.csdn.net/smlljet/article/details/91874728
  https://blog.csdn.net/weixin_45932565/article/details/104478662?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare
   */
  // 1.定义私有指令名称 不包括 v- 字样
  // 2.私有指令，directives用复数形式，全局自定义指令用单数形式
  // 3.包含：inserted bind update componentUpdated unbind 5个生命周期钩子
  directives: {
    color: {
      // 被绑定节点插入父节点时调用，只执行一次
      inserted: function(el, bind) {
        console.log(bind);
        el.style.backgroundColor = bind.value;
      },
      // 指令第一次绑定到元素时执行，只执行一次
      // el表示绑定自定义指令的元素，bind表示绑定的指令对象，包含绑定指令的属性信息
      // bind: function(el, bind) {
      //   el.style.backgroundColor = bind.value;
      // },
      // 所有节点的VNode更新时调用，可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没变
      // 本案例中update必须要有。自定义指令，直接通过按钮，不是响应式的（原因是：inserted和bind钩子都在初始渲染时只执行了一次），
      // 需要添加该指令生命周期钩子，点击按钮，h3背景才会发生改变
      update: function(el, bind) {
        el.style.backgroundColor = bind.value;
      },
      // 所有Vnode和子Vnode都更新完成时执行
      componentUpdated: function(el, bind) {},
      // 指令与元素解绑时执行，只执行1次
      unbind: function(el, bind) {}
    }
  },
  methods: {
    // 自定义指令color中没有设置update生命周期钩子时，点击按钮时没有任何作用的
    changeColor() {
      this.myColor = 'yellow';
    }
  }
};
</script>
<style lang="less" scoped></style>
